<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组用</title>
	
	</head>
	<body>
		<div id="ap">
			<span v-for="item in array" v-text="item"></span><br>
			数据：<input type="text" v-model="data">
			<button @click="push">末尾追加</button>
			<button @click="pop">移除最后一个元素</button>
			<button @click="shift()">删除第一个元素</button><br>
			<button @click="unshift()">在开头追加元素</button>
			<button @click="splice()">替换元素</button>
			<button @click="sort()">排序</button>
			<button @click="reverse()">反转</button>
			
		</div>
		<script src="../js/vue.js"></script>
			
		<script>
			const app=new Vue({
				el:'#ap',
				data:{
					array:[1 ,5 ,4 ,7],
					data:''
				},
				methods:{
					push(){
						this.array.push(this.data)
					},
					pop(){
						// 移除最后一个数
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.data)
					},
					splice(){
						//关于参数说明  参数1:操作数据起始位置 index
						//			   参数2：操作数据的个数
						//			   参数3：要替换的值
						//			   将第一个参数进行替换
						//删除元素	   删除第一个元素
						// this.array.splice(0,2)
						//替换元素	   替换前2个元素（将元素当做整体进行替换）
						//替换后的元素可以有多个
						this.array.splice(0,1,this.data)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					}
				}
				
			})
		</script>
	</body>
</html>
